<template>
  <div class="home backImg">

    <el-dialog
      title="统计"
      :visible.sync="dateadvertisement"
      width="85%">
      <el-table :data="datatitle" border style="width: 100%" v-loading="loading2" element-loading-text="拼命加载中">
        <el-table-column prop="Sheng" label="省份" :formatter="shengfen" width="150">
        </el-table-column>
        <el-table-column prop="一级代理人数" label="一级代理人数" width="130">
        </el-table-column>
        <el-table-column prop="一级总消费" label="一级总消费" width="100">
        </el-table-column>
        <el-table-column prop="二级代理人数" label="二级代理人数" width="330">
        </el-table-column>
        <el-table-column prop="二级总消费" label="二级总消费" width="180">
        </el-table-column>
        <el-table-column prop="总人数" label="总人数" width="180">
        </el-table-column>
        <el-table-column prop="总消费" label="总消费" width="180">
        </el-table-column>
      </el-table>
    </el-dialog>


    <el-dialog
      :title="Tongji"
      :visible.sync="tu_flage"
      width="85%">
      <userstatistics :obgrect="dataarr" class="obgrectdataarr"></userstatistics>
    </el-dialog>
    <el-row class="header_top">
      <el-col :span="20" class="height_gao">
        <div class="grid-content bg-purple  height_gao">
          <div class="left_table">
            <el-button type="primary" plain class="TongJiBiao" @click="tongjibiao">统计表格</el-button>
          </div>
          <div class="text_a">总消费：￥{{consumption}}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp总人数：{{totalpeople}}</div>
        </div>
      </el-col>
      <el-col :span="4" class="height_gao">
        <div class="grid-content bg-purple-light height_gao">
        </div>
      </el-col>
    </el-row>

    <div id="main" class="main_body">
    </div>

  </div>
</template>
<script>
  import  img from  "~/timg.jpg";
  import china from '~/china';
  import  userstatistics from  "cs/home/userstatistics";  // tuye
  export default {
    components: {userstatistics},
    data(){
      return {
        img,

        urlimg: this.$IMG,
        salesman: '',//业务员
        pagesize: this.$store.state.attribute.page, //每页条数
        total: 1, //总条数
        currentPage4: 1, //总页数
        cur: 1, //当前页数
        loading2: true,
        Temporary: [],  //总数据
        datatitle: [],  //当页数据
        value4: '',
        Seeclass: [],
        fenleiflag: 1,
        imgarr: {},
        imgtext: "",
        rowindex: '',
        dialogFormVisible: false,
        formLabelWidth: '146px',
        express: '',//快递编号
        orderinfo: {},//订单信息
        orderIndex: 0,//订单位置
        Ordertype: 2,
        adoptMoney: false, //
        money_id: [],// 装提款ID
        dateadvertisement: false,
        geoCoordMap: {
          //对应地图坐标
          '上海': [121.472644, 31.231706],
          '云南': [102.712251, 25.040609],
          '内蒙古': [111.670801, 40.818311],
          '北京': [116.405285, 39.904989],
          '台湾': [121.509062, 25.044332],
          '吉林': [125.3245, 43.886841],
          '四川': [104.065735, 30.659462],
          '天津': [117.190182, 39.125596],
          '宁夏': [106.278179, 38.46637],
          '安徽': [117.283042, 31.86119],
          '山东': [117.000923, 36.675807],
          '山西': [112.549248, 37.857014],
          '广东': [113.280637, 23.125178],
          '广西': [108.320004, 22.82402],
          '新疆': [87.617733, 43.792818],
          '江苏': [118.767413, 32.041544],
          '江西': [115.892151, 28.676493],
          '河北': [114.502461, 38.045474],
          '河南': [113.665412, 34.757975],
          '浙江': [120.153576, 30.287459],
          '海南': [110.33119, 20.031971],
          '湖北': [114.298572, 30.584355],
          '湖南': [112.982279, 28.19409],
          '澳门': [113.54909, 22.198951],
          '甘肃': [103.823557, 36.058039],
          '福建': [119.306239, 26.075302],
          '西藏': [91.132212, 29.660361],
          '贵州': [106.713478, 26.578343],
          '辽宁': [123.429096, 41.796767],
          '重庆': [106.504962, 29.533155],
          '陕西': [108.948024, 34.263161],
          '青海': [101.778916, 36.623178],
          '香港': [114.173355, 22.320048],
          '黑龙江': [126.642464, 45.756967],
          '没有设置省的总统计': [0, 0]
        },
        data: [{
          name: "上海",
          value: 0
        }, {
          name: "云南",
          value: 0
        }, {
          name: "内蒙古",
          value: 0
        }, {
          name: "北京",
          value: 0
        }, {
          name: "台湾",
          value: 0
        }, {
          name: "吉林",
          value: 0
        }, {
          name: "四川",
          value: 0
        }, {
          name: "天津",
          value: 0
        }, {
          name: "宁夏",
          value: 0
        }, {
          name: "安徽",
          value: 0
        }, {
          name: "山东",
          value: 0
        }, {
          name: "山西",
          value: 0
        }, {
          name: "广东",
          value: 0
        }, {
          name: "广西",
          value: 0
        }, {
          name: "新疆",
          value: 0
        }, {
          name: "江苏",
          value: 0
        }, {
          name: "江西",
          value: 0
        }, {
          name: "河北",
          value: 0
        }, {
          name: "河南",
          value: 0
        }, {
          name: "浙江",
          value: 0
        }, {
          name: "海南",
          value: 0
        }, {
          name: "湖北",
          value: 0
        }, {
          name: "湖南",
          value: 0
        }, {
          name: "澳门",
          value: 0
        }, {
          name: "甘肃",
          value: 0
        }, {
          name: "福建",
          value: 0
        }, {
          name: '西藏',
          value: 0
        }, {
          name: "贵州",
          value: 0
        }, {
          name: "辽宁",
          value: 0
        }, {
          name: "重庆",
          value: 0
        }, {
          name: "陕西",
          value: 0
        }, {
          name: "青海",
          value: 0
        }, {
          name: "香港",
          value: 0
        }, {
          name: "黑龙江",
          value: 0
        }, {
          name: '普通用户',
          value: 0
        }
        ],
        tu_flage: false,
        dataarr: {},
        datapacket: {},
        consumption: '',//总消费
        totalpeople: '',
        Tongji:'',
      }
    },
    methods: {
      tongjibiao(){
        this.dateadvertisement = true;
      },
      drawing(e){       //批量提款审核

      },
      shengfen(row){
        if (row.Sheng == '') {
          return '普通用户';
        } else {
          return row.Sheng;
        }
      },

//      export2Excel(){   //导出execl
//        var myDate = new Date();
//        let header = ['用户昵称', '用户电话', '提款总金额', '用户提交备注信息', '提款发起时间'];
//        let val = ['user.nickname', 'user.phone', 'money', 'remark', 'created_at'];
//        this.$h.exportexcel(header, val, this.datatitle, '商品信息' + myDate.toLocaleString());
//      },

      handleCurrentChange(val) { //分页
        if (this.fenleiflag != 1) {
          this.bodyaudh(val)
        }
      },
      bodyaudh(){
        this.loading2 = true;
        this.http.post({
          'api': 'provincesum',
          'data': {
            'data': {
//              'province': '四川省'
            }
          },
        }).then((res) => {
          this.shuju(res.data.data);
          this.datapacket = res.data.data;
          this.fenleiflag = 0;
        }, (err) => {
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
      shuju(data) {
        var a = [];
        var dataOgj = {};
        for (var i in data) {
          data[i].Sheng = i;
          a.push(data[i]);
          if (i == '') {
            this.data[34].value = data[i]['总消费'];
          }
          for (var b = 0; b < this.data.length; b++) {
            if (this.data[b].name == i) {
              this.data[b].value = data[i]['总消费'];
            }
          }
        }
        this.loading2 = false;
        this.datatitle = a;
        this.tuur();
      },
      tuur(){

        var convertedData = [
          this.convertData(this.data),
          this.convertData(this.data.sort(function (a, b) {
            return b.value - a.value;
          }).slice(0, 6))
        ];


        this.data.sort(function (a, b) {
          //按照this.data 的value进行数据进行排序处理
          return a.value - b.value;
        });


        var selectedItems = [];  //
        var categoryData = [];   //渲染的名称
        var barData = [];
        //   var maxBar = 30;
        var sum = 0;            //数量总数
        var count = this.data.length;  //总条数
        for (var i = 0; i < this.data.length; i++) {
          categoryData.push(this.data[i].name);
          barData.push(this.data[i].value);
          sum += this.data[i].value;
        }

        let option = {
          backgroundColor: 'rgba(17, 16, 16, 0.58)',
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          title: [{
//            text: '全国主要城市 业务量',
//            subtext: '内部数据请勿外传',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          }, {
            id: 'statistic',
            text: count ? '平均消费: ￥' + parseInt((sum / count).toFixed(4)) : '',
            right: 120,
            top: 40,
            width: 100,
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          }],
          toolbox: {
            iconStyle: {
              normal: {
                borderColor: '#fff'
              },
              emphasis: {
                borderColor: '#b1e4ff'
              }
            },
            feature: {
              dataZoom: {},
              brush: {
                type: ['rect', 'polygon', 'clear']
              },
              saveAsImage: {
                show: true
              }
            }
          },
          brush: {
            outOfBrush: {
              color: '#abc'
            },
            brushStyle: {
              borderWidth: 2,
              color: 'rgba(0,0,0,0.2)',
              borderColor: 'rgba(0,0,0,0.5)',
            },
            seriesIndex: [0, 1],
            throttleType: 'debounce',
            throttleDelay: 300,
            geoIndex: 0
          },
          geo: {
            map: 'china',
            left: '20%',
            top: '22%',
//            right: '35%',
            center: [117.98561551896913, 31.205000490896193],
            zoom: 1.2,
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            }
          },
          tooltip: {
            trigger: 'item'
          },
          grid: {
            right: 40,
            top: 100,
            bottom: 5,
            width: '30%'
          },
          xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            boundaryGap: false,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 2,
              textStyle: {
                color: '#aaa'
              }
            },
          },
          yAxis: {
            type: 'category',
            //  name: 'TOP 20',
            nameGap: 16,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#ddd'
              }
            },
            data: categoryData
          },
          series: [{
            // name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertedData[0],
            symbolSize: function (val) {
              return Math.max(val[2] / 10, 8);
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#ddb926',
                position: 'right',
                show: true
              }
            }
          }, {
            //  name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertedData[0],
            symbolSize: function (val) {
              return Math.max(val[2] / 10, 8);
            },
            showEffectOn: 'emphasis',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          }, {
            id: 'bar',
            zlevel: 2,
            type: 'bar',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#ddb926'
              }
            },

            data: this.data
          }]
        };
        var myChart = this.$echarts.init(document.getElementById('main'));
        myChart.setOption(option);
        myChart.on('click', (params) => {

          if (this.datapacket[params.name] == undefined) {
              console.log(this.datapacket[params.name]);
            if (params.name == '普通用户') {
                console.log(111)
              this.dataarr = this.datapacket[""];
              this.Tongji = '普通用户  统计';
              this.tu_flage = true;
            } else {
              this.$notify({
                title: '警告',
                message: '该省份没有数据',
                duration: 2000,
                type: 'warning'
              });
            }
          } else {
            this.dataarr = this.datapacket[params.name];
            this.Tongji = this.datapacket[params.name].Sheng+' 统计';
            this.tu_flage = true;
          }
        });
        myChart.on('mouseover', (params) => {
          if (this.datapacket[params.name] == undefined) {
            this.consumption = '0';
            this.totalpeople = '0'
          } else {
            this.consumption = this.datapacket[params.name]['总消费'];
            this.totalpeople = this.datapacket[params.name]['总人数'];
          }
        });


      },
      convertData(data) {
        //构成数据
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = this.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
//                geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      }
    },
    watch: {},
    computed: {
      //计算属性
    },
    created(){

    },
    mounted(){
      this.bodyaudh();

      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .obgrectdataarr {
    width: 100%;
    height: 500px;
  }

  .left_table {
    width: 30%;
    height: 100%;
    float: left;
    /*background: red;*/
  }

  .text_a {
    width: 30%;
    height: 100%;
    float: left;
    /*background: red;*/
    line-height: 60px;
    text-align: center;
    color: white;
  }

  .TongJiBiao {
    margin-left: 30px;
    margin-top: 10px;
    background: #ededed05;
  }

  .main_body {
    width: 96%;
    height: 90%;
    margin-left: 2%;
  }

  .class_body {
    width: 100%;
    height: 700px;
    float: right;
    overflow-y: scroll;
  }

  .backImg {
    background: url("../../assets/bg.jpg");
    background-size: 100% 100%;
  }

  .sheng_fen_ {
    width: 49%;
    height: 100px;
    /*background-color: red;*/
    float: left;
    margin-top: 30px;
  }

  .tuo_img {
    width: 100%;
    height: 100%;
    /* background-size: 100% 100%; */
    /* margin: auto; */
    display: block;
    font-size: 50px;
    color: skyblue;
    line-height: 140px;
    text-align: center;
  }

  .sheng_text {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: white;
  }

  .text_ares {
    width: 86%;
    height: 219px;
    margin-top: 11px;
  }

  .allith2 {
    background: #090404;
    float: right;
    /*margin-top: 15px;*/
  }

  .height_gao {
    height: 100%;
  }

  .header_top {
    height: 60px;
    width: 100%;
  }
</style>
